<template>
  <div class="page flex-col">
    <div class="bd1 flex-col justify-between">
      <div class="layer2 flex-col">
        <div
            class="outer1 flex-col justify-center"
            v-for="(item, index) in loopData0"
            :key="index"
        >
          <router-link :to="item.to" class="section1 flex-row">
            <div class="layer3 flex-col" :style="{ background: item.lanhuBg2, backgroundSize: 'cover' }">
              <div v-if="item.slot2 === 2" class="box3 flex-col">
                <div
                    class="section2 flex-col"
                    :style="{ background: item.specialSlot2.lanhuBg1, backgroundSize: 'cover' }"
                ></div>
              </div>
              <div v-if="item.slot3 === 3" class="box4 flex-col"></div>
            </div>
            <div class="TextGroup120 flex-col justify-between">
              <span class="info2" v-html="item.lanhutext0"></span>
              <span
                  class="word2"
                  :style="{ color: item.lanhufontColor1 }"
                  v-html="item.lanhutext1"
              ></span>
            </div>
            <span v-if="item.slot1 === 1" class="info3">剩余25天</span>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loopData0: [
        {
          lanhuBg2: 'rgba(236,67,130,0.100000)',
          lanhutext0: 'VIP会员',
          lanhutext1: '已为你节省580元',
          lanhufontColor1: 'rgba(236,67,130,1)',
          slot3: 3,
          slot1: 1,
          to: '/memberintro2'
        },
        {
          lanhuBg2: 'rgba(216,216,216,1.000000)',
          lanhutext0: '日系蕾丝乖巧女仆角色扮演',
          lanhutext1: '已使用',
          lanhufontColor1: 'rgba(171,171,171,1)',
          specialSlot2: {
            lanhuBg1:
                'url(/images/a.png) 100% no-repeat',
          },
          slot2: 2,
          to: '/servicesDetail'
        },
        {
          lanhuBg2: 'rgba(216,216,216,1.000000)',
          lanhutext0: '日系蕾丝乖巧女仆角色扮演',
          lanhutext1: '已过期',
          lanhufontColor1: 'rgba(171,171,171,1)',
          specialSlot2: {
            lanhuBg1:
                'url(/images/b.png) 100% no-repeat',
          },
          slot2: 2,
          to: '/servicesDetail'
        },
      ],
      constants: {},
    };
  },
  methods: {},
};
</script>
<style lang="stylus" scoped>
.page {
  min-height: 100vh;
  background: #F6F7F9;
}
.arrow {
  width: 10px;
  height: 20px;
  background: url('../assets/image/arrow.svg') 50% 0 no-repeat;
  background-size: cover;
  margin-top 3px
}

.flex-col {
  display: flex;
  flex-direction: column;
}
.justify-between {
  display: flex;
  justify-content: space-between;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.justify-center {
  display: flex;
  justify-content: center;
}
.bd1 {
  width: 750px;
  height: 728px;
}
.layer1 {
  background-color: rgba(255, 255, 255, 1);
  height: 128px;
  width: 750px;
}
.bd2 {
  width: 750px;
  height: 108px;
}
.box1 {
  height: 60px;
  width: 750px;
  padding: 14px 0 0 42px;
}
.mod1 {
  width: 679px;
  height: 34px;
}
.mod2 {
  width: 108px;
  height: 34px;
  overflow-wrap: break-word;
  font-size: 0;
  letter-spacing: -0.5600000023841858px;
  font-family: Helvetica;
  text-align: right;
  white-space: nowrap;
  line-height: 34px;
}
.info1 {
  width: 108px;
  height: 34px;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 28px;
  font-family: Helvetica;
  text-align: left;
  white-space: nowrap;
  line-height: 34px;
}
.word1 {
  width: 108px;
  height: 34px;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 28px;
  font-family: Helvetica;
  text-align: left;
  white-space: nowrap;
  line-height: 34px;
}
.box2 {
  width: 427px;
  height: 42px;
  margin: 6px 0 0 20px;
}
.icon1 {
  width: 16px;
  height: 28px;
  margin-top: 11px;
}
.txt1 {
  width: 144px;
  height: 42px;
  overflow-wrap: break-word;
  color: rgba(33, 33, 33, 1);
  font-size: 36px;
  text-align: right;
  white-space: nowrap;
  line-height: 42px;
  display: block;
}
.layer2 {
  width: 710px;
  height: 580px;
  justify-content: space-between;
  margin: 20px 0 0 20px;
}
.outer1 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 20px;
  height: 180px;
  margin-bottom: 20px;
  padding-left: 30px;
  width: 710px;
}
.section1 {
  width: 660px;
  height: 120px;
}
.layer3 {
  border-radius: 10px;
  height: 120px;
  width: 120px;
}
.box3 {
  height: 120px;
  background:  100% no-repeat;
  width: 120px;
}
.section2 {
  width: 120px;
  height: 120px;
}
.box4 {
  width: 100px;
  height: 88px;
  background: url('../assets/image/vip.png') 0px -1px no-repeat;
  background-size: cover;
  margin: 16px 0 0 10px;
}
.TextGroup120 {
  height: 116px;
  margin-left: 20px;
  width: 234px;
}
.info2 {
  width: 252px;
  height: 50px;
  overflow-wrap: break-word;
  color: rgba(33, 33, 33, 1);
  font-size: 36px;
  font-family: PingFangSC-Semibold;
  text-align: left;
  white-space: nowrap;
  line-height: 50px;
  display: block;
}
.word2 {
  width: 234px;
  height: 42px;
  overflow-wrap: break-word;
  font-size: 30px;
  font-family: PingFangSC-Semibold;
  text-align: left;
  white-space: nowrap;
  line-height: 42px;
  margin-top: 24px;
  display: block;
}
.info3 {
  width: 152px;
  height: 50px;
  overflow-wrap: break-word;
  color: rgba(89, 120, 239, 1);
  font-size: 36px;
  font-family: PingFangSC-Semibold;
  text-align: left;
  white-space: nowrap;
  line-height: 50px;
  margin-left: 134px;
  display: block;
}
</style>
